<script setup lang="ts">
import { EDropdown } from 'exploria-ui';

type Placement = InstanceType<typeof EDropdown>['placement'];
const placementList = [
    'top-start',
    'top',
    'top-end',
    'left-start',
    '',
    'right-start',
    'left',
    '',
    'right',
    'left-end',
    '',
    'right-end',
    'bottom-start',
    'bottom',
    'bottom-end',
] as const;
</script>

<template>
    <div class="using">
        <div class="row" v-for="index in 5" :key="index">
            <template
                v-for="placement of placementList.slice(
                    (index - 1) * 3,
                    index * 3,
                )"
            >
                <EDropdown
                    v-if="placement.length"
                    trigger="click"
                    :placement="placement as Placement"
                    :key="placement"
                >
                    <button>{{ placement }}</button>
                    <template #dropdown>
                        <div class="dropdown-content">
                            <div class="item">1</div>
                            <div class="item">1</div>
                            <div class="item">1</div>
                        </div>
                    </template>
                </EDropdown>
                <div v-else />
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.using {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .row {
        display: flex;
        gap: 10px;
        justify-content: space-evenly;

        button {
            cursor: pointer;
        }

        .dropdown-content {
            width: 100px;
            background-color: #fff;
            border-radius: 4px;

            .item {
                padding: 10px;
                cursor: pointer;

                &:hover {
                    background-color: #f5f5f5;
                }
            }
        }
    }
}
</style>
